<template>
  <div class="pubish">
    <div class="publish__dialog-wrapper" v-show="dialogShow">
      <div
        class="publish__dialog"
        :class="dialogShow ? 'publish-in' : 'publish-out'"
      >
        <div class="pd__top">
          <div class="pd__top__title">
            {{ title }}
          </div>
          <div class="pd__top__close" @click="closeDialog">x</div>
        </div>
        <div class="pd__content">
          <textarea
            :class="{
              pd__content__textarea: true,
              'warn-border': isExceedMaxLength,
            }"
            :placeholder="placeholder"
            v-model="content"
            :maxlength="maxlength"
          >
          </textarea>
          <span
            :class="
              isExceedMaxLength
                ? 'pd__content__limit--warn'
                : 'pd__content__limit'
            "
            >{{ currentLength }}/{{ maxlength }}</span
          >
        </div>
        <div class="pd__upload">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            ref="upload"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions pd__upload__actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-preview"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog
            :visible.sync="dialogImgVisible"
            :modal="false"
            width="30%"
            custom-class="pic-dialog"
          >
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
        <div class="pd__topic">
          <RoyoleCascader
            v-for="(topic, index) in topicList"
            :key="index"
            :topic="topic"
          />
        </div>
        <div class="pd__bottom">
          <div class="pd__bottom__button--grey" @click="cancel">取消</div>
          <div class="pd__bottom__button--hightlight" @click="confirm">
            确定
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import RoyoleCascader from './RoyoleCascader'
export default {
  name: 'PublishDialog',
  data() {
    return {
      // 输入内容
      content: '',
      dialogImageUrl: '',
      dialogImgVisible: false,
      disabled: false,
    }
  },
  components: {
    RoyoleCascader,
  },
  props: {
    //dialog 标题
    title: String,
    // textarea 上的textarea
    placeholder: String,
    //textarea 最大长度
    maxlength: {
      type: Number,
      default: 5,
    },
    topicList: {
      type: Array,
      default: null,
    },
    dialogVisible: {
      type: Boolean,
      default: true,
    },
  },
  created() {
    console.log(this.topicList)
  },
  computed: {
    // 处理dialog 显示 改变父元素
    dialogShow: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      },
    },
    // 当前文本长度
    currentLength() {
      return this.content.length
    },
    // 当前文本是否超过最大长度
    isExceedMaxLength() {
      return this.content.length >= this.maxlength
    },
  },
  methods: {
    // 关闭dialog
    closeDialog() {
      this.dialogShow = false
      this.$router.go(-1)
    },
    handleRemove(file) {
      // 实现缩略图模板时删除文件
      let fileList = this.$refs.upload.uploadFiles
      let index = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid
      })
      fileList.splice(index, 1)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogImgVisible = true
    },
    cancel() {
      this.dialogShow = false
    },
    confirm() {
      this.dialogShow = false
    },
  },
}
</script>

<style lang="scss">
@keyframes publishIn {
  from {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes publishIn {
  from {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes publishIn {
  from {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-o-keyframes publishIn {
  from {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes publishOut {
  from {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes publishOut {
  from {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes publishOut {
  from {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes publishOut {
  from {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.publish-in {
  animation: publishIn 1.5s ease-in-out;
  -webkit-animation: publishIn 1.5s ease-in-out;
  -moz-animation: publishIn 1.5s ease-in-out;
  -o-animation: publishIn 1.5s ease-in-out;
}
.publish-out {
  animation: publishOut 1.5s ease-in-out;
  -webkit-animation: publishOut 1.5s ease-in-out;
  -moz-animation: publishOut 1.5s ease-in-out;
  -o-animation: publishOut 1.5s ease-in-out;
}
.publish__dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100vw;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  overflow-y: scroll;
  .publish__dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    border-radius: 16px;
    background: $color-background;
    .pd__top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 48px;
      padding: 12px 24px;
      line-height: 24px;
      font-size: 16px;
      font-weight: 500;
      background: rgba(0, 0, 0, 0.03);
      .pd__top__close {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.5);
        cursor: pointer;
      }
    }
    .pd__content {
      position: relative;
      &__textarea {
        margin: 16px 24px;
        padding: 16px;
        width: 752px;
        height: 180px;
        line-height: 20px;
        border-radius: 16px;
        border: none;
        background: rgba(0, 0, 0, 0.03);
      }
      &__textarea:focus {
        outline: none;
      }
      .warn-border {
        border: red 2px solid;
      }
      &__limit {
        position: absolute;
        bottom: 30px;
        right: 40px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
      }
      &__limit--warn {
        position: absolute;
        bottom: 30px;
        right: 40px;
        font-size: 12px;
        color: red;
      }
    }
    .pd__upload {
      margin-left: 24px;
      .el-upload--picture-card {
        width: 64px;
        height: 64px;
        line-height: 64px;
        background: rgba(0, 0, 0, 0.03);
        border: none;
        i {
          font-size: 19px;
        }
      }
      .pd__upload__actions {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .el-upload-list--picture-card {
        width: 64px;
        height: 64px;
        .el-upload-list__item {
          width: 64px;
          height: 64px;
          background: rgba(0, 0, 0, 0.03);
          border: none;
        }
      }
    }
    .pd__topic {
      margin: 24px;
      display: flex;
      justify-content: space-between;
    }
    .pd__bottom {
      padding-right: 24px;
      padding-bottom: 24px;
      display: flex;
      justify-content: flex-end;
      &__button--grey {
        @include button(rgba(#000000, 0.05), rgba(#000000, 0.6));
        margin-right: 24px;
      }
      &__button--hightlight {
        @include button($color-royole, #ffffff);
      }
    }
  }
}
</style>
